<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <div class="title_list">
        <div class="con1">{{ $t("page1.doc57") }}</div>
        <div class="con2"></div>
      </div>

      <div class="code">
        <!--          <div class="title">-->
        <!--            <div class="name">{{ $t("page1.doc59") }}</div>-->
        <!--            <div class="icon"></div>-->
        <!--          </div>-->
        <!-- <div class="cons">{{ $t('page4.doc9') }}</div> -->
        <div class="qrcode" ref="qrCodeUrl"></div>
        <!--          <div class="con">-->
        <!--            {{ $store.state.userData.inviteCode }}-->
        <!--            <span-->
        <!--              v-clipboard:copy="$store.state.userData.inviteCode"-->
        <!--              v-clipboard:success="onCopy"-->
        <!--              >{{ $t("page1.doc60") }}</span-->
        <!--            >-->
        <!--          </div>-->
      </div>

      <div class="footer">
        <div class="top">
          <div class="li">{{ $t("page.doc92") }}</div>
          <div class="ri" v-clipboard:copy="qrUrl" v-clipboard:success="onCopy">
            <img src="../../assets/images/Group29.png" alt="" />
          </div>
        </div>
        <div class="bottom">
          {{ qrUrl }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      title: this.$t("page.doc98"),
      datainfo: [],
      qrUrl: "",
      lang: this.$store.state.lang,
    };
  },

  mounted() {
    let lang = localStorage.getItem("language") || "en_US";
    // this.bgPng = require("../assets/images/invate_" + lang + '.png')

    let findVal = this.$store.state.h5Url.find((item) => {
      return item.tag === "SHARE_YQHX";
    });
    this.qrUrl =
      findVal.url + "inviteCode=" + this.$store.state.userData.inviteCode;

    var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      text: this.qrUrl, // 需要转换为二维码的内容
      // width: 112,
      // height: 112,
      width: 150,
      height: 150,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },
  methods: {
    onCopy(e) {
      this.$toast(this.$t("page.doc31"));
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background: linear-gradient(180deg, rgba(16, 17, 22, 0.2) 0%, #101116 67.5%),
    url("../../assets/images/Group31.png") no-repeat top center;
  background-size: 100% auto;
  min-height: 100vh;
}

.qrcode {
  width: 100%;
  height: 100%;
  transform: translate(-0.13rem, -0.05rem);

  /deep/ img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.code {
  background: url("../../assets/images/Group33.png") no-repeat right center;
  background-size: 100% auto;
  position: relative;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0.29rem;
  margin: 0 auto;
}

.title_list {
  font-size: 0.42rem;
  font-family: PingFangTC-Light, PingFangTC;
  font-weight: 300;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 0.82rem;

  .con1 {
    font-size: 0.52rem;
    font-weight: 600;
    //margin-left: 0.46rem;
    //margin-bottom: 0.4rem;
    line-height: 0.56rem;
    text-align: center;
  }

  .con2 {
    line-height: 0.46rem;
  }
}

.footer {
  font-size: 0.28rem;
  font-family: PingFangTC-Regular, PingFangTC;
  font-weight: 400;
  color: var(--COcolor3);
  background: #282A2C99;
  border-radius: 0.24rem;
  padding: 0.3rem 0.24rem;
  margin-top: 1rem;
  margin-bottom: 1rem;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;

    .li {
      font-size: 0.32rem;
      font-weight: 500;
      color: #FFDD9A;
    }

    .ri {
      display: flex;
      align-items: center;
      color: var(--COcolor1);

      img {
        //height: 0.26rem;
        //margin-right: 0.12rem;
      }
    }
  }

  .bottom {
    font-size: 0.28rem;
    font-family: PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: #fff;
    line-height: 0.44rem;
  }
}

.url {
  .db {
    height: 0.8rem;
    background: #3b3941;
    border-radius: 0.4rem;
    padding: 0 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.24rem;

    span {
      color: #f4345d;
    }
  }
}

.go {
  padding: 0.2rem 0;
}

.box {
  > img {
    width: 100%;
  }

  .abs {
    bottom: 0.36rem;
    width: 100%;
    padding: 0 0.26rem;

    .db {
      background: #141517;
      border-radius: 0.48rem;
      padding: 0.4rem 0.2rem;

      .flexs {
        padding: 0 0.22rem;
      }

      .ico {
        width: 1.12rem;
        height: 1.12rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .n {
        font-size: 0.3rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        line-height: 0.42rem;
        margin-bottom: 0.04rem;
      }

      .code {
        font-size: 0.22rem;
        font-weight: 400;
        color: #f4345d;
        line-height: 0.58rem;

        img {
          margin-left: 0.06rem;
          height: 0.2rem;
          vertical-align: middle;
        }
      }

      .m {
        margin: -0.4rem 0;
        width: 1.6rem;
        height: 1.6rem;

        /deep/ img {
          width: 1.6rem;
          height: 1.6rem;
          border-radius: 0.1rem;
        }
      }
    }
  }
}
</style>
